<template>
	<!-- 头部盒子 -->
	<div class="header">
		<!-- 标题区域 -->
		<div class="lnner-header">
			<h2>欢迎使用超市商品管理系统</h2>
		</div>
		<br />
		<!-- 波浪区域 -->
		<div>
			<!-- svg形状 -->
			<svg class="waves" viewBox="0 24 150 28" 
				preserveAspectRatio="none" shape-rendering="auto">
				<!--形状容器-->
				<defs>
					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 
						58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<!-- 组合形状 -->
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
				</g>
				
			</svg>
		</div>
	</div>
</template>

<script>
export default {

}
</script>

<style scoped>
	@import url("../assets/css/style.css");
	
.welcome h3 {
	text-align: center;   
	display: block;
}

.welcome{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.heart {
	width: 14em;
	height: 11em;
	font-size: 25px;
	display: flex;
	justify-content: space-between;
}

.heart span {
	--c: lightblue;
	--h: 50%;
	--t: 25%;
	width: 1em;
	background-color: var(--c);
	border-radius: 0.5em;
	position: relative;
	height: var(--h);
	top: var(--t);
	animation: beating 5s infinite;
}

.heart span:nth-child(1),
.heart span:nth-child(9){
	--c: orangered;
	--h: 3em;
	--t: 2.2em;
}

.heart span:nth-child(2),
.heart span:nth-child(8){
	--c: gold;
	--h: 6em;
	--t: 0.6em;
}

.heart span:nth-child(3),
.heart span:nth-child(7){
	--c: limegreen;
	--h: 8em;
	--t: 0;
}

.heart span:nth-child(4),
.heart span:nth-child(6){
	--c: dodgerblue;
	--h: 9em;
	--t: 0.8em;
}

.heart span:nth-child(5){
	--c: mediumpurple;
	--h: 9.4em;
	--t: 1.6em;
}

@keyframes beating {
	0%, 30% {
		height: var(--h);
		top: var(--t);
		background-color: var(--c);
		filter: blur(0);
		width: 1em;
	}

	60%, 70% {
		height: 50%;
		top: 25%;
		background-color: lightblue;
		filter: blur(5px);
		width: 0.1em;
	}
}
</style>